<template>
  <div class="TaskList">
    <el-row>
      <el-col v-for="item in taskList" :key="item.title" :xl="4" :lg="6" :md="6" :sm="6" :xs="12">
        <el-card shadow="hover"
                 class="card"
                 style="display:flex;align-items: center;justify-content: center;position: relative"
                 v-if="taskList.length !== 0"
                 @click.native="button(item.title)">
          <p>{{ item.title }}</p>
          <div style="display: flex;justify-content: center">
            <p style="margin-top: 20px;color: #0080ff;background:#011229;width:70px;border-radius:8px;">{{
                item.fraction
              }} 分</p>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TaskList",
  props: ["taskList"],
  data() {
    return {}
  },
  watch: {},
  mounted() {
    console.log("this.taskList", this.taskList)
    this.$forceUpdate()
  },
  methods: {
    button(val) {
      this.$router.push({
        path: "/answer",
        query: {
          val: val
        }
      })
    },
  }
}
</script>

<style scoped>
.card {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
  width: 230px;
  height: 153px;
  color: white;
  border: none;
  cursor: pointer;
  background: url("~@/assets/task-backgrounde.png");
  background-size: 100%, 100%;
}

.TaskList {
  margin-top: 40px;
}
</style>